<template>
  <div class="infoMain">
    <div class="body cont-main">
      <div class="top-search-bar">
        <el-form size="small" ref="queryForm" inline>
          <el-form-item>
            <el-button
                type="primary"
                icon="el-icon-back"
                @click="$router.go(-1)"
                size="small">返回
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-input
                style="width: 190px"
                @blur="searchFnc"
                v-model="searchData.pluginsName" clearable
                placeholder="组件名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select
                style="width: 190px"
                v-model="searchData.isIndb"
                placeholder="是否入库" clearable
                @change="searchFnc">
              <el-option label="入库" value="0"></el-option>
              <el-option label="不入库" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
                style="width: 190px"
                v-model="searchData.isMonitor"
                placeholder="是否监听" clearable
                @change="searchFnc">
              <el-option label="监听" value="0"></el-option>
              <el-option label="不监听" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
                style="width: 190px"
                v-model="searchData.isSwitch"
                placeholder="是否切换" clearable
                @change="searchFnc">
              <el-option label="切换" value="0"></el-option>
              <el-option label="不切换" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchFnc">搜索
            </el-button>
            <el-button type="primary" icon="el-icon-refresh-right" @click="searchGo0">刷新
            </el-button>
            <el-button
                v-if="auth&&auth.add"
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="$router.push({name:'CompRegister'})">新增
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <Table
          :table-header="tableHeader"
          :tableData="tableData"
          :pgVisible="pgVisible"
          height="calc(100vh - 220px)"
          :pg-total-num="total"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange">
        <div slot="operation" slot-scope="row">
          <i class="el-icon-edit table-btn" @click="ediRow(row.data)" title="编辑" v-if="auth&&auth.edit"></i>
          <i class="el-icon-circle-plus table-btn"
             v-show="row.data.pluginsTest !=0"
             @click="testing(row.data)" title="测试"></i>
          <i class="el-icon-delete del table-btn" @click="delROW(row.data)" title="删除" v-if="auth&&auth.del"></i>
        </div>

        <div slot="pluginsTest" slot-scope="row" style="line-height: 1;">
          <el-tag v-if="parseInt(row.data.pluginsTest)===0" type="success" size="mini" effect="dark">通过</el-tag>
          <el-tag v-else-if="parseInt(row.data.pluginsTest)===1" type="success" size="mini" effect="dark">未通过</el-tag>
          <el-tag v-else type="danger" size="mini" effect="dark">未测试</el-tag>
        </div>

      </Table>
    </div>

    <Dialog
        :addNewVisible="testingVisble"
        @closeDia="testingClo"
        width="720px"
        :center="true"
        title="一键检测">
      <div slot="body" class="testBody">
        <div class="fncItem" v-for="(item, index) in fncAllData" :key="index">
          <span class="cfff">函数:{{ item.functionName }}</span>
          <div class="fncType">
            <span class="lab cfff">参数对应类型：</span>
            <div class="item-box">
              <div class="item-li"
                   v-for="(res, ind) in item.paramInputClass.split(',')"
                   :key="ind">
                <span class="label-text">{{ res.split(' ')[0] }}</span>
                <span class="text">{{res.split(' ')[1] || ''}}</span>
              </div>
            </div>
          </div>
          <div class="fncTest">
            <span class="lab cfff">测试参数：</span>
            <el-input
                v-model="iptAll[index]"
                placeholder="参数请对应上表类型与位置，使用','隔开"
                type="textarea"></el-input>
          </div>
        </div>
        <div class="jdt" v-show="percentageVis">
          <el-progress :percentage="percentage"></el-progress>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="testEsc">取 消</el-button>
          <el-button type="primary" @click="testEnt">确 定</el-button>
        </div>
      </div>
    </Dialog>

    <Dialog
        :addNewVisible="resultVisble"
        @closeDia="resultClo"
        width="720px"
        :center="true"
        title="检测结果查看">
      <div slot="body">
        <div class="fncIte" v-for="(item, index) in result" :key="index">
          <div class="item">
            <span>函数：{{ item.title }}</span>
            <span>结果：{{ item.val }}</span>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resultClo">取 消</el-button>
          <el-button type="primary" @click="resultEnt">确 定</el-button>
        </div>
      </div>
    </Dialog>

    <TestResultDailog ref="testResultDailog" @confirmTap="getList"></TestResultDailog>
  </div>
</template>

<script>
import {
  get_getPluginsByUserPage,
  del_deletePlugins,
  get_getPlugins,
} from "@/apis/comList/comList";
import TestResultDailog from '@/views/component/register/comp/TestResultDailog'

let timeId2 = "";
let timeId = "";
import {
  post_loadDll,
  put_libraryAdd,
  get_getFunctionByPluginsId,
} from "@/apis/assembly/assembly";
import Dialog from "@/components/Dialog/Dialog.vue";
import Table from "@/components/Table";

const ISMONITOR = {
  0: "监听",
  1: "不监听",
};
const ISINDB = {
  0: "入库",
  1: "不入库",
};
const ISSWITCH = {
  0: "切换",
  1: "不切换",
};
const PLUGINSStatus = {
  0: "运行",
  1: "未运行",
};
const PLUGINSTEST = {
  0: "通过",
  1: "未通过",
  2: "未测试",
};
export default {
  components: {Table, Dialog, TestResultDailog},
  data() {
    return {
      auth: null,
      searchData: {
        isIndb: "",
        isMonitor: "",
        isSwitch: "",
        pluginsName: "",
      },
      tableHeader: [
        {prop: "pluginsName", name: "组件名", width: 200},
        {prop: "pluginsVesion", name: "版本", width: 100, tooltip: true},
        {prop: "pluginsPath", name: "组件路径", width: 100, tooltip: true},
        {prop: "isIndb", name: "是否入库", width: 80},
        {prop: "isSwitch", name: "是否切换", width: 80},
        {prop: "isMonitor", name: "是否监听", width: 80},
        {prop: "pluginsStatus", name: "组件状态", width: 80},
        {prop: "pluginsTest", name: "测试结果", tag: true, width: 80},
        {prop: "userName", name: "操作人", width: 100},
        {prop: "pluginsScene", name: "场景描述", minWidth: 100, tooltip: true},
        {prop: "remarks", name: "备注", minWidth: 100, tooltip: true},
        {prop: "addTime", name: "添加时间", width: 140},
        {prop: "editTime", name: "修改时间", width: 140},
        {prop: "operation", name: "操作", slot: true, width: 140}
      ],
      tableData: [],
      pgVisible: true,
      total: 0,
      pageNum: 1,
      currentPage: 1,
      pageSize: 10,
      testingVisble: false,
      fncAllData: [], // 本组件下的所有函数
      iptAll: [], //输入框
      percentage: 0, //进度
      percentageVis: false,
      rowId: "",
      result: [], //测试结果
      resultVisble: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //获取信息
    getList(val) {
      get_getPluginsByUserPage(
        Object.assign(
          {},
          {pageNum: this.pageNum, pageSize: this.pageSize, plugins: {}},
          val,
          {
            menuId: this.$route.meta.id
          }
        )
      ).then((res) => {
        let {data, code, auth} = res.data;
        this.total = data.total;
        this.auth = auth
        if (code == 0) {
          if (data.records.length === 0 && this.pageNum > 1) {
            this.pageNum--;
            this.getList();
          }
          data.records.forEach((item) => {
            item.isHover = false;
            item.isIndb = ISINDB[item.isIndb];
            item.isMonitor = ISMONITOR[item.isMonitor];
            item.isSwitch = ISSWITCH[item.isSwitch];
            item.pluginsTestStr = PLUGINSTEST[item.pluginsTest];
            item.pluginsStatus = PLUGINSStatus[item.pluginsStatus];
            item.addTime = this.$moment(item.addTime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
            if (item.editTime) {
              item.editTime = this.$moment(item.editTime).format(
                "YYYY-MM-DD HH:mm:ss"
              );
            }
          });
          this.tableData = data.records;
        }
      });
    },
    //删除组件
    delROW(row) {
      let that = this;
      that
        .$confirm("此操作将永久删除选择组件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          del_deletePlugins({pluginsId: row.id}).then((res) => {
            let {code, msg} = res.data;
            if (code == 0) {
              this.$message.success(msg);
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //搜索
    searchFnc() {
      this.getList(this.searchData);
      // this.searchData = {
      //   isIndb: "",
      //   isMonitor: "",
      //   isSwitch: "",
      //   pluginsName: "",
      // };
    },
    searchGo0() {
      this.getList();
      this.searchData = {
        isIndb: "",
        isMonitor: "",
        isSwitch: "",
        pluginsName: "",
      };
    },
    //编辑组件
    ediRow(row) {
      row.isHover = false;
      this.$router.push({name: 'CompEdit', query: {id: row.id}});
    },
    //检测
    testing(row) {
      clearInterval(timeId);
      clearInterval(timeId2);
      this.percentage = 0;
      this.percentageVis = false;
      this.iptAll = [];
      this.rowId = row.id;
      get_getFunctionByPluginsId({
        pluginsId: row.id,
      }).then((res) => {
        let {data, code} = res.data;
        this.testingVisble = true;
        this.fncAllData = data;
      });
    },
    //结果确定
    resultEnt() {
      this.resultVisble = false;
      this.getList();
    },
    //一键检测弹框
    testingClo() {
      this.testingVisble = false;
      this.iptAll = [];
    },
    resultClo() {
      this.resultVisble = false;
    },
    // 确定检测
    testEnt() {
      this.percentage = 0;
      this.percentageVis = true;
      this.result = [];
      timeId = setInterval(() => {
        this.percentage += 3;
        if (this.percentage > 80) {
          clearInterval(timeId);
          timeId2 = setInterval(() => {
            this.percentage += 1;
            if (this.percentage > 98) {
              clearInterval(timeId2);
              this.percentage = 99;
              clearInterval(timeId2);
            }
          }, 500);
        }
      }, 100);

      let data = [];
      this.fncAllData.forEach((item) => {
        data.push({id: item.id, paramInputClass: ""});
      });
      this.iptAll.forEach((item, index) => {
        data[index].paramInputClass = item;
      });
      post_loadDll({id: this.rowId, data}).then((res) => {
        let {code, msg, data} = res.data;
        if (code === 0) {
          clearInterval(timeId2);
          clearInterval(timeId);


          this.percentageVis = false;
          this.percentage = 0;
          let resultDatas = data.map((item) => {
            let liItem = this.fncAllData.find(li => {
              return item.id == li.id
            })
            return {
              name: liItem.functionName,
              value: item.value,
              code: 0
            }
          });
          this.$refs.testResultDailog.show(resultDatas)

          this.testingVisble = false;
        } else {
          clearInterval(timeId2);
          clearInterval(timeId);
          this.percentageVis = false;
          this.percentage = 0;
        }
      });
    },
    //取消检测
    testEsc() {
      this.testingVisble = false;
      this.percentage = 0;
      this.iptAll = [];
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
  .fncIte {
    .item {
      margin-bottom: 20px;
      display: flex;

      span {
        display: inline-block;
        width: 50%;
      }
    }
  }

  .testBody {
    max-height: 500px;
    overflow: auto;
  }

  .jdt {
    width: 50%;
    margin: 0 auto;
  }

  .fncItem {
    margin-bottom: 10px;
    text-align: center;
    width: 100%;

    .lab {
      width: 100px;
      display: block;
      margin-top: 6px;
    }

    .fncType {
      margin-top: 10px;
      display: flex;

      .item-box {
        width: 80%;
        height: 80px;
        border: 1px solid #ffffff;
        display: flex;
        flex-wrap: wrap;
        overflow: scroll;
        padding: 5px;
        background-color: #ffffff;
        border-radius: 4px;

        .item-li {
          width: calc(33.3333% - 10px);
          height: 30px;
          line-height: 28px;
          text-align: center;
          margin-right: 10px;
          margin-bottom: 5px;
          color: #ffffff;
          border: 1px solid #216892;
          display: flex;
          border-radius: 4px;
          overflow: hidden;

          .label-text {
            width: 70px;
            flex-shrink: 0;
            height: 100%;
            background-color: #bfbebe;
            border-right: solid 1px #216892;
          }

          .text {
            padding: 0 12px;
            color: #333;
          }
        }
      }
    }

    .fncTest {
      margin-top: 10px;
      display: flex;

      /deep/ .el-textarea {
        width: 80% !important;

        /deep/ .el-textarea__inner {
          width: 100% !important;
        }
      }
    }
  }

  .infoMain {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .body {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 15px;
    }
  }

  .top-search-bar {
  }
</style>